<template>
  <div
    :class="['modal', {fade: fade}]"
    data-backdrop="static"
    data-disable="false"
    data-keyboard="true"
    tabindex="-1"
  >
    <div :class="['modal-dialog', size]">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title text-center text-primary">
            <span>{{ title }}</span>
          </h4>
        </div>
        <div class="modal-body">
          <el-form ref="form" :inline="true" :model="form" size="small" label-width="67px">
            <el-form-item>
              <el-input v-model="form.value" clearable placeholder="请输入搜索内容" />
            </el-form-item>
            <el-select
              v-model="form.type"
              clearable
              placeholder="类型"
              class="filter-item"
              style="width: 130px"
            >
              <el-option
                v-for="item in queryTypeOptions"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
            <el-button
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-search"
              style="height: 30px;"
              @click="handclickSearchBtn"
            >搜索</el-button>
          </el-form>
          <br>
          <el-table
            ref="channelTable"
            v-loading="loading"
            :data="channels"
            :max-height="500"
            :row-style="rowStyle"
            element-loading-text="加载中..."
            border
            style="margin-top: -16px;"
            @sort-change="sortChange"
            @row-click="rowClick"
          >
            <el-table-column
              prop="name"
              label="设备名称"
              min-width="200"
              show-overflow-tooltip
              sortable="custom"
              align="center"
              :fixed="!isMobile()"
            />
            <el-table-column
              prop="port"
              label="端口号"
              min-width="200"
              show-overflow-tooltip
              sortable="custom"
              align="center"
              :fixed="!isMobile()"
            />
            <el-table-column
              prop="ip"
              label="IP地址"
              min-width="200"
              show-overflow-tooltip
              sortable="custom"
              align="center"
              :fixed="!isMobile()"
            />
            <el-table-column
              prop="path"
              label="路径"
              min-width="200"
              show-overflow-tooltip
              sortable="custom"
              align="center"
              :fixed="!isMobile()"
            />
          </el-table>
          <el-pagination
            layout="total,prev,pager,next"
            :pager-count="5"
            class="pull-right"
            :total="total"
            :page-size.sync="pageSize"
            :current-page.sync="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div class="clearfix" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" @click="cancelClick">取消</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
</template>

<script>
import $ from 'jquery'
import 'jquery-ui/ui/widgets/draggable'
import { getVideoInfoList } from '@/api/sapientialSite/videoInfo'
import { getVideoSearchList } from '@/api/index'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'modal-lg'
    },
    fade: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      sort: '',
      order: '',
      loading: false,
      channels: [],
      index: 0,
      form: {
        value: '',
        type: ''
      },
      queryTypeOptions: [{ key: 'name', display_name: '名称' }]
    }
  },
  watch: {},
  mounted() {
    $(this.$el)
      .find('.modal-content')
      .draggable({
        handle: '.modal-header',
        cancel: '.modal-title span',
        addClasses: false,
        containment: 'document',
        delay: 100,
        opacity: 0.5
      })
    $(this.$el)
      .on('shown.bs.modal', () => {
        this.$emit('show')
      })
      .on('hidden.bs.modal', () => {
        // this.errors.clear()
        // this.reset();
        this.$emit('hide')
      })
  },
  methods: {
    sortChange(data) {
      console.log('排序数据', data)
      this.sort = data.prop
      this.order = data.order === 'ascending' ? 'asc' : 'desc'
      this.getChannels()
    },
    // 搜索
    handclickSearchBtn() {
      const params = {
        page: 0,
        size: 10,
        sort: 'id,desc',
        value: this.form.value,
        type: this.form.type,
        name: this.form.value
      }
      getVideoSearchList(params)
        .then(res => {
          this.channels = res.content || []
          this.total = 3
        })
        .catch(err => {
          console.log(err)
        })
    },
    getChannels() {
      this.loading = false
      getVideoInfoList()
        .then(res => {
          this.channels = res.content || []
          this.total = res.totalElements
        })
        .catch(err => {
          console.log(err)
          this.loading = true
        })
    },
    rowClick(row, event, column) {
      // if(row.status !== "on") return;
      this.$emit('selected', this.index, row)
      this.hide()
    },
    cancelClick() {
      this.form.value = ''
      this.form.type = ''
      this.queryTypeOptions = []
      this.hide()
    },
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    rowStyle({ row, rowIndex }) {
      if (row.status === 'on') {
        return 'cursor:pointer'
      }
      return 'cursor:pointer'
    },
    reset() {
      this.index = 0
      this.channels = []
      this.q = ''
      this.currentPage = 1
      this.pageSize = 10
    },
    show(index) {
      this.index = index
      $(this.$el).modal('show')
      this.getChannels()
    },
    hide() {
      $(this.$el).modal('hide')
    }
  }
}
</script>

<style lang="less" scoped>
label.el-switch {
  margin-bottom: -10px;
}
</style>
